<template>
  <div class="bigBox">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>设备管理</el-breadcrumb-item>
      <el-breadcrumb-item>设备挂失</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row> </el-row>
    <h2>挂失记录</h2>

    <el-row :gutter="24">
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <el-button
            type="text"
            @click="dialogFormVisible = true"
            icon="el-icon-plus"
            style="padding: 12px; background-color: #3f3f65; color: white"
            >普通挂失</el-button
          >
        </div>
      </el-col>

      
        <el-col :span="6">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="7">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="-"
            start-placeholder="挂失起始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        

        <el-col :span="4">
          <el-button
            type="primary"
            class="chaXun"
            style="padding: 12px; background-color: #3f3f65"
            >查询</el-button
          >
        </el-col>
      </el-col>

      <el-col :span="4" center>
        <el-dropdown style="padding-left: 10px">
          <el-button
            type="primary"
             style="
              background-color: white;
              color: #3f3f65;
              border-color: #3f3f65;
            "
          >
            导出Excel<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item></el-dropdown-item>
            <el-dropdown-item>导出全部</el-dropdown-item><br />
            <el-dropdown-item>导出选中</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>

    <div class="from color">
      <el-table
        :data="tableData"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column label="分类" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>

        <el-table-column label="名称" width="120"> 1</el-table-column>

        <el-table-column label="编码" width="120">> </el-table-column>

        <el-table-column label="单价（元）" width="120">> </el-table-column>

        <el-table-column label="挂失数量" width="120">> </el-table-column>

        <el-table-column label="规格" width="120">> </el-table-column>

        <el-table-column label="挂失类型" width="120">> </el-table-column>

        <el-table-column label="审批状态" width="120">> </el-table-column>

        <el-table-column label="挂失时间" width="120">2020 </el-table-column>

        <el-table-column label="操作" show-overflow-tooltip>
          <el-tooltip class="item" effect="dark" content="查看详情" placement="top">
             <el-button
            type="warning"
            circle
            class="el-icon-search"
            @click="dialogVisible = true"
          ></el-button>
    </el-tooltip>
         
    <el-tooltip class="item" effect="dark" content="编辑信息" placement="top">
             <el-button
            type="primary"
            @click="centerDialogVisible = true"
            icon="el-icon-edit"
            circle
          ></el-button>
    </el-tooltip>
          
          <el-button type="danger" icon="el-icon-delete" circle></el-button>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      type="primary"
      background
      layout="prev, pager, next"
      :total="100"
      class="pag"
    >
    </el-pagination>

    <!-- 新增挂失模态框 -->
    <el-dialog title="新增挂失" :visible.sync="dialogFormVisible">
      <div class="addLoseBox">
        <el-form :model="form">
          <el-form-item label="查询区域：" :label-width="formLabelWidth">
            <el-input
              v-model="input"
              placeholder="请输入编码或名称"
              style="width: 150px"
            ></el-input>
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="-"
              start-placeholder="入库起始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
            <el-button
              type="primary"
              class="chaXun"
              style="background-color: #3f3f65"
              >查询</el-button
            >
          </el-form-item>

          <el-form-item label="信息显示：" :label-width="formLabelWidth">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"> </el-table-column>

              <el-table-column label="分类" width="150">
                <template slot-scope="scope">{{ scope.row.date }}</template>
              </el-table-column>

              <el-table-column prop="name" label="名称" width="80">
              </el-table-column>

              <el-table-column prop="name" label="编码" width="80">
              </el-table-column>

              <el-table-column prop="name" label="单价（元）" width="100">
              </el-table-column>

              <el-table-column prop="name" label="数量" width="80">
              </el-table-column>

              <el-table-column prop="name" label="规格" width="80">
              </el-table-column>

              <el-table-column
                prop="address"
                label="存放地点"
                show-overflow-tooltip
              >
              </el-table-column>

              <el-table-column prop="name" label="入库时间" width="150">
              </el-table-column>

              <el-table-column prop="name" label="挂失数量" width="100">
              </el-table-column>
            </el-table>
          </el-form-item>
          <div>
            <el-form-item label="挂失时间：" :label-width="formLabelWidth">
              <el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item label="挂失原因：" :label-width="formLabelWidth">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="textarea"
              >
              </el-input>
            </el-form-item>
          </div>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </div>
    </el-dialog>

    <!-- 查看详情模态框 -->
    <el-dialog
      title="挂失详情"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <ul class="detailsLi">
        <li>
          <span>编号</span>
          <span>分类</span>
          <span>名称</span>
        </li>
        <li>
          <span>单价:</span>
          <span>挂失数量:</span>
        </li>
        <li>
          <span>规格:</span>
          <span>入库时间:</span>
        </li>
        <li>
          <span>是否唯一:</span>
          <span>挂失类型:</span>
        </li>
        <li>
          <span>挂失时间:</span>
          <span>挂失原因:</span>
        </li>
        <li>
          <!-- active决定状态 -->
          <el-steps :space="200" :active="2" finish-status="success">
            <span>审批状态：</span>
            <el-step title="我"></el-step>
            <el-step title="领导"></el-step>
            <el-step title="老板"></el-step>
          </el-steps>
        </li>
      </ul>
    </el-dialog>

    <!-- 修改选项模态框 -->
    <el-dialog title="挂失编辑" :visible.sync="centerDialogVisible" width="40%">
      <ul class="detailsLi">
        <li>
          <el-input
            autocomplete="off"
            placeholder="请输入编号"
            style="width: 120px; margin: 10px"
            center
          ></el-input>
          <el-select
            placeholder="请选择分类"
            style="width: 120px; margin: 10px"
            center
          >
            <el-option label="分类一" value="shanghai"></el-option>
            <el-option label="分类二" value="beijing"></el-option>
          </el-select>
          <el-input
            autocomplete="off"
            placeholder="请输入名称"
            style="width: 120px; margin: 10px"
            center
          ></el-input>
        </li>
        <li>
          <span
            >单价:
            <el-input
              autocomplete="off"
              placeholder="请输入单价"
              style="width: 100px"
              center
            ></el-input>
          </span>
          <span
            >挂失数量:
            <el-input
              autocomplete="off"
              placeholder="挂失数量"
              style="width: 100px"
              center
            ></el-input>
          </span>
        </li>
        <li>
          <span
            >规格:
            <el-input
              autocomplete="off"
              placeholder="规格"
              style="width: 100px"
              center
            ></el-input>
          </span>
          <span
            >入库时间:
            <el-input
              type="date"
              autocomplete="off"
              style="width: 100px"
              center
            ></el-input>
          </span>
        </li>
        <li>
          <span
            >唯一
            <el-checkbox></el-checkbox>
          </span>
          <span
            >挂失类型:
            <el-select
              placeholder="请选择分类"
              style="width: 120px; margin: 10px"
            >
              <el-option label="普通挂失" value="shanghai"></el-option>
              <el-option label="出借挂失" value="beijing"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span
            >挂失时间:
            <el-input
              type="date"
              autocomplete="off"
              style="width: 100px"
            ></el-input>
          </span>
          <span
            >挂失原因:
            <el-input
              style="width: 200px"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="textarea"
            >
            </el-input>
          </span>
        </li>
      </ul>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      dialogVisible: false,
      centerDialogVisible: false,
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },

  methods: {
   
  },
};
</script>
  
  <style>

/* 新增挂失模态框 */
.bigBox {
  margin: 29px;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 30px;
}

h2 {
  padding: 10px 0;
}

.from {
  padding: 10px 0;
}

.tu1 {
  width: 100px;
  height: 50px;
}
.shouSuo {
  width: 300px;
  height: 50px;
}
.tu2 {
  width: 50px;
  height: 50px;
}

.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
}

.el-icon-upload2 {
  height: 50px;
  width: 50px;
  font-size: 30px;
  cursor: pointer;
}
.el-icon-download {
  height: 50px;
  width: 50px;
  font-size: 30px;
  cursor: pointer;
}
.pag {
  float: right;
}
/* 查看详情模态框 */
.detailsLi {
  list-style-type: none;
}
.detailsLi li {
  margin: 10px;
}

.detailsLi li span {
  margin: 30px;
}
</style>